<template>
    <div class="">
        <div class="listBox_head">
            <el-button type="primary" plain @click="addUser">添加管理员</el-button>
        </div>
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
            @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
            <template v-slot:type="{ scope }">
                <dict-tag :options="typeLs" :value="scope.row.type" />
            </template>
            <template v-slot:operate="{ scope }">
                <el-button @click="lookDetail(scope.row)" size="small" v-if="scope.row.type != 1">编辑</el-button>
                <el-button type="primary" size="small" v-if="scope.row.status == 2 && scope.row.type != 1"
                    @click="operateChainUserStatus(scope.row)">启用</el-button>
                <el-button type="warning" size="small" v-if="scope.row.status == 1 && scope.row.type != 1"
                    @click="operateChainUserStatus(scope.row)">停用</el-button>
                <el-button type="danger" size="small" v-if="scope.row.type != 1" @click="deleteUser(scope.row)">删除</el-button>
            </template>
        </ex-table>
        <addPersonnel v-if="detailDialog" :visible.sync="detailDialog" :id="id" :path="path" @success="_handleSuccess">
        </addPersonnel>
    </div>
</template>
<script>
// components
import {
    chainUserList, chainUserStatus,deleteChainUser
} from "@/api/syChainManagement/syChainManagement.js";
import handlePageMixin from "@/mixins/handlePageMixin";
import addPersonnel from "./components/addPersonnel"
export default {
    //   name: "",
    components: {
        addPersonnel
    },
    mixins: [handlePageMixin],
    data() {
        return {
            loading: false,
            buttonLoading: false,
            formInline: {
                businessLicence: "", //营业执照
                chainType: "", //连锁类型 1 直营店 2加盟店
                proceedsType: "", //收款类型 1 总部收款 2门店收款
            },
            status: 1,
            chainId: "", //总店id
            typeLs: [],//账号类型字典
            detailDialog: false,
            id: '',
            tableData: [],
            tableColumn: [
                { prop: "account", label: "登录账号" },
                { prop: "name", label: "用户姓名" },
                { prop: "shopNum", label: "管理门店数量" },
                { slot: true, slot: true, slotName: "type", label: "账号类型" },
                {
                    label: "操作",
                    slot: true,
                    slotName: "operate",
                    width: "320",
                    fixed: "right",
                },
            ],
            path: 'add',
        };
    },
    created() {
        this.chainId = this.$route.query.id;
        this.getDict();
        this.getList();
    },
    computed: {},
    methods: {
        //获取字典
        getDict() {
            var dictType = "merchant_chain_user_type";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.typeLs = res.result[0].dictList;
                })
        },
        //编辑
        lookDetail(e) {
            this.id = e.id
            this.path = 'edit'
            this.detailDialog = true;
        },
        //新增
        addUser() {
            this.id = ''
            this.path = 'add'
            this.detailDialog = true;
        },
        //停用、启用
        operateChainUserStatus(row) {
            let status = ''
            if (row.status == '1') {
                status = '2'
            } else {
                status = '1'
            }
            var params = {
                id: row.id,
                status: status
            }
            chainUserStatus(params).then(res => {
                this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                });
                this.getList()
            })
        },
        //获取列表
        getList() {
            const params = {
                ...this.pageOptions,
                chainId: this.chainId,
            };
            this.loading = true;
            chainUserList(params)
                .then((res) => {
                    const { total, records } = res.result;
                    this.$refs.table.pageOptions.total = total;
                    this.tableData = records;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        //删除
        deleteUser(row) {
            this.$confirm('是否删除 ?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteChainUser(row.id).then((res) => {
                        this.$message({
                            message: "操作成功",
                            type: "success",
                            duration: 1500,
                        });
                        setTimeout(() => {
                            this.getList();
                        }, 300);
                    });
                })
                .catch(() => { });
        },
        _handleSuccess() {
            this.getList();
        },
    },
};
</script>
  
<style lang="scss" scoped>
.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
}

.list_search {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.table_list {
    display: flex;
    align-items: center;
    // border: 1px solid #DCDFE6;
    border-radius: 7px;
    width: 220px;
    margin-bottom: 10px;
}

.tableBox {
    width: calc(100% / 3);
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #303133;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-right: 0;
}

.tableBox:first-child {
    border-radius: 7px 0px 0px 7px;
}

.tableBox:last-child {
    border-right: 1px solid #dcdfe6;
    border-radius: 0px 7px 7px 0px;
}

.spchoosetext {
    background-color: #fff4e6;
    color: #ff9300;
    // border: 1px solid #ff9300;
}

.listBox_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;

}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.head ::v-deep.el-input-group__prepend {
    width: 110px !important;
}
</style>
  